<template>
    <div class="selectw">
        <!-- v-model 选择的数据 -->
        <el-select v-model="value" class="m-2" @change="getValS" :placeholder="placeholder" 
        :size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'

let props:any = defineProps({  //defineProps接受到的数据是 只读的reactive
    large: {
        type: String,
        default: ''
    },
    placeholder:{
        type:String,
        default:'请选择'
    },
    playcList:{  //结构   ['全部','未开始','进行中','已结束']
    // 1. 这是异步数据  2.在js对象中对这个数据处理  3.怎么获取到最新的数据
        type:Array,

    }
})
const value = ref('')

// ui组件库需要的数据结构 =》 和后端给的数据很有可能是不一样的 => 需要自己用js处理   数组，对象方法，循环，递归
// 后端给的数据不是我想要的需要处理  =》这里 在子组件中处理 
// (如果要拿到父组件给子组件传的异步数据，需要通过watch方法对它进行处理)
// watch 方法监听两种数据，ref 直接写数据，reactive 需要写方法

watch(()=>props.playcList,(newV,oldV)=>{
    console.log(newV,oldV,808080);
    // 变成我需要的结构
    getData(newV)    
})

let options:any = ref([])
const getData = (list:any)=>{
    list.forEach((item:any)=>{
        options.value.push({value:item,label:item})
    })
}

let emits = defineEmits(['getSelectD'])   //公共方法
// 4. 选择了数据之后，要把数据传给父组件，因为我们用户在父组件点击查询时，需要获取到这个子组件的数据
const getValS=(vals:any)=>{
    emits('getSelectD',vals)    
}
</script>

<style scoped lang="scss">
.selectw {
    margin-left: 10px;
}
</style>